<!-- 侧边栏 -->
<template>
	<div class="leftnav" :class="{ 'active': isActive }">
		<div class="topnav">
			<el-button size="small" type="primary" @click="showEchartsNav">
				<el-icon>
					<fold />
				</el-icon>
			</el-button>
			<span>图形分类</span>
			<el-button size="small" type="primary" @click="clickPuAway">
				<el-icon>
					<arrow-left />
				</el-icon>
			</el-button>
		</div>
		<ul class="nav_list" :class="{ 'activeNav': isShowNav }">
			<li @click="clickNav(1)">饼图</li>
			<li @click="clickNav(2)">柱图</li>
			<li @click="clickNav(3)">线图</li>
		</ul>
		<ul v-if="isShowEcharts === 1" @dragstart="handleDragStart($event, 0, '饼图1')">
			<li draggable="true">
				<span>饼图1</span>
				<img src="../../assets/images/1.png" alt />
			</li>
		</ul>
		<ul v-if="isShowEcharts === 2" @dragstart="handleDragStart($event, 1, '柱状图1')">
			<li draggable="true">
				<span>柱状图1</span>
				<img src="../../assets/images/2.png" alt />
			</li>
		</ul>
		<ul v-if="isShowEcharts === 3" @dragstart="handleDragStart($event, 2, '线图1')">
			<li draggable="true">
				<span>线图1</span>
				<img src="../../assets/images/3.png" alt />
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	data() {
		return {
			isShowNav: false,
			isShowEcharts: 1
		};
	},
	props: {
		isActive: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		clickPuAway() {
			this.$emit('changeLeftNav', false)
		},
		handleDragStart(e, index, val) {
			console.log(e, '==handleDragStart')
			e.dataTransfer.setData('index', index)
			e.dataTransfer.setData('val', val)
		},
		//展示echarts类别
		showEchartsNav() {
			this.isShowNav = !this.isShowNav
		},
		//点击选择echarts类别
		clickNav(val) {
			this.isShowEcharts = val
		}
	}
}

</script>
<style lang='scss' scoped>
.leftnav {
	position: absolute;
	width: 200px;
	height: calc(100vh - 60px);
	border-right: 1px solid #ccc;
	transition: 0.5s;
	left: -200px;
	z-index: 100;
	background: rgba(0, 0, 0, 0.4);
	.nav_list {
		position: absolute;
		left: -45px;
		background: #409eff;
		color: #fff;
		width: 44px;
		transition: 0.5s;
		li {
			cursor: pointer;
			padding-bottom: 10px;
			border-bottom: 1px solid;
		}
	}
	.activeNav {
		left: 0;
	}
	ul {
		img {
			width: 200px;
			height: 200px;
		}
	}
}
.active {
	left: 0;
}
.topnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	span {
		font-size: 0.2rem;
		color: #fff;
	}
}
</style>